<!-- App.vue -->
<template>
    <div class="app-container">
      <div class="sidebar">
        <SidebarMenu @menu-select="handleMenuSelect" />
      </div>
      <div class="main-content">
        <DynamicTabs ref="tabsRef" />
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import SidebarMenu from './components/SidebarMenu.vue';
  import DynamicTabs from './components/DynamicTabs.vue';
  
  const tabsRef = ref();
  
  const handleMenuSelect = (menuItem) => {
    tabsRef.value.addTab(menuItem);
  };
  </script>
  
  <style scoped>
  .app-container {
    display: flex;
  }
  .sidebar {
    width: 220px;
    border-right: 1px solid #e4e7ed;
  }
  .main-content {
    flex: 1;
    padding: 20px;
  }
  </style>